<template>
  <div >
    <!-- 背景图片 -->
    <header-bg-img></header-bg-img>
    <!-- 背景音乐 -->
    <bg-music></bg-music>
    <!-- 通讯录二维码 -->
    <card-ercode></card-ercode>
    <!-- 微信二维码 -->
    <div transfer-dom>
      <x-dialog :show.sync="showErcode" class="dialog-demo"  :hide-on-blur="true">
        <div class="img-box">
          <qrcode v-if="cardercode" v-model="data.baseLists.wxErcode" type="canvas" :size="230"></qrcode>
        </div>
        <tab>
          <tab-item selected >微信二维码</tab-item>
        </tab>
      </x-dialog>
    </div>
    <scroller  lock-x height="-40" class="scrollFloat">
      <div class="box2">
        <p class="popu">
            <img class="fadeOutUp" src="http://wx.jlmgps.com/app/themes/vcard03/static/images/v_img82.png" alt="">
        </p>
        <div class="aboutme">About Me</div>
        <div class="module1">
            <p class="myname" >
              <span @click.prevent="getContent(data.baseLists.firstName)" style="font-size:30px;">{{data.baseLists.firstName}}</span>
              <span @click.prevent="getContent(data.baseLists.job)">{{data.baseLists.job}}</span>
            </p>
            <p class="callme">
              <a href="#" @click.prevent="getContent(data.baseLists.telephone)">
                <x-icon type="ios-telephone" :style="{fill:fontColor}"></x-icon>
              <span :style="{color:fontColor,verticalAlign}">{{data.baseLists.telephone}}</span>
              </a>
            </p>
            <ul class="allnum">
              <li>
                <p @click.prevent="getContent(data.baseLists.persons)">{{data.baseLists.persons}}</p>                
                <p @click.prevent="getContent(data.baseLists.personNum)">{{data.baseLists.personNum}}</p>            
              </li>
              <li>
                <p @click.prevent="getContent(data.baseLists.workYears)">{{data.baseLists.workYears}}</p>                
                <p @click.prevent="getContent(data.baseLists.years)">{{data.baseLists.years}}</p>            
              </li>
            </ul>
            <p class="shouyi" @click.prevent="getContent(data.baseLists.signs)">{{data.baseLists.signs}}</p>
        </div>
        <div class="module1">
          <p class="iTitle" data-info="">
              <img v-lazy="'http://wx.jlmgps.com/attachment/images/4/2016/11/B9e0Y0MKLyYyELQTkkY5IKn9G9PQyy.png'" alt=""><span>荣誉展示</span>
          </p>
          <div class="abouttext">
            <swiper-uploader ></swiper-uploader>
            <p v-for="(item, index) in data.honorShow" :key="index" style="margin-top: 0px; margin-bottom: 0px; white-space: normal; padding: 4px 0px 4px 30px; line-height: 24px;">
              <x-icon type="star" :style="{fill:'#fc6'}" size="20"></x-icon>
              <span :style="{verticalAlign:'2px'}" @click.prevent="changeModuleFont(index,item)">{{item}}</span>
              <span v-if="isEditing">
              <x-icon type="ios-minus-outline" :style="{fill:'#1DF5A9',display:'inline-block',marginLeft:'20px'}" size="20" @click.prevent="reduceContains('honorShow',index)"></x-icon>
              </span>
            </p>
            <x-button plain type="primary" style="border-radius:99px;" v-if="isEditing" @click.native="addContain('honorShow')">增加段落</x-button>
          </div>
        </div>
        <div class="module1">
          <p class="iTitle" data-info="">
              <img v-lazy="'http://wx.jlmgps.com/attachment/images/4/2016/11/EXR0ExM3NzksKr32XkM38S9Lke93J9.png'" alt=""><span>公司简介</span>
          </p>
          <div class="abouttext" style="padding: 0px 15px;">
            <p  v-for="(item,index) in data.companyProfile">
              <span @click.prevent="changeIntration('companyProfile',item,index)" :style="{verticalAlign:'2px'}">{{item}}</span> 
              <x-icon v-if="isEditing" type="ios-minus-outline" :style="{fill:'#1DF5A9',display:'inline-block',marginLeft:'20px'}" size="20" @click.prevent="reduceContains('companyProfile',index)"></x-icon> 
            </p>                    
            <p class="morebg" v-if="!isEditing">
            <a class="more1" href="#">了解更多</a>
            <x-icon type="ios-arrow-down" :style="{fill:'#df9090'}" ></x-icon>
            </p>
              <x-button plain type="primary" style="border-radius:99px;" v-if="isEditing" @click.native="addContain('companyProfile')">增加段落</x-button>
          </div>
        </div>
        <div class="module1">
          <p class="iTitle" data-info="">
              <img v-lazy="'http://wx.jlmgps.com/attachment/images/4/2016/11/MgzBq2n5unh5h5duyEW5l2QEGLY1e2.png'" alt=""><span>企业文化</span>
          </p>
          <div class="abouttext" style="padding: 0px 15px;">
            <p  v-for="(item,index) in data.companyculture">
              <span @click.prevent="changeIntration('companyculture',item,index)" :style="{verticalAlign:'2px'}" >{{item}}</span> 
              <x-icon v-if="isEditing" type="ios-minus-outline" :style="{fill:'#1DF5A9',display:'inline-block',marginLeft:'20px'}" size="20" @click.prevent="reduceContains('companyculture',index)"></x-icon> 
            </p> 
            <p class="morebg" v-if="!isEditing">
              <a class="more1" href="#">了解更多</a>
              <x-icon type="ios-arrow-down" :style="{fill:'#df9090'}" ></x-icon>
            </p>
            <x-button plain type="primary" style="border-radius:99px;" v-if="isEditing" @click.native="addContain('companyculture')">增加段落</x-button>
          </div>
        </div>
        <div class="module1" data-info="0">
          <p class="iTitle">
              <img v-lazy="'http://wx.jlmgps.com/attachment/images/4/2016/11/x5Io1077Q8esdsf3Eis1E3510Dd08f.png'" alt=""><span>我的理财中心</span>
          </p>
          <unit-video></unit-video>
        </div>
        <div class="module1">
          <p class="iTitle">
              <img v-lazy="'http://wx.jlmgps.com/attachment/images/4/2016/11/EXR0ExM3NzksKr32XkM38S9Lke93J9.png'" alt=""><span>留言咨询</span>
          </p>
        <leave-message></leave-message>
        </div>
        <div class="module1">
          <p class="iTitle">
            <img v-lazy="'http://wx.jlmgps.com/app/themes/vcard03/static/images/tab_img5.png'" alt=""><span>我的位置</span>
          </p>     
          <baidu-map></baidu-map>
        </div>
      <load-more tip="loading"></load-more>
    </div>
    </scroller>
    <!-- 底部导航 -->
    <footer-banner @childgetContent="getContent" @getWetchErcode="addwechatErcode" :lists.sync="data.baseLists"></footer-banner>
    <!-- 弹框更改段落 -->
    <div transfer-dom>
      <x-dialog v-model="show100" class="dialog-demo">
        <group title="编辑当前段落">
           <x-textarea :max="200" v-model="companyStatus.contains" name="CompanyInfo"  :rows="11" ></x-textarea>
        </group>
        <div class="weui-dialog__ft">
          <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_default" @click="show100=false">取消</a> 
          <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary" @click="maketrue">确定</a>
        </div>
      </x-dialog>
    </div>
  </div>
</template>
<script type="application/ecmascript">
  import * as types from '@/vuex/types'
  import _ from 'lodash'
  import { mapState, mapActions } from 'vuex'
  import HeaderBgImg from '@/public/HeaderBgImg'
  import BgMusic from '@/public/BgMusic'
  import CardErcode from '@/public/CardErcode'
  import SwiperUploader from '@/public/SwiperUploader'
  import FooterBanner from '@/public/FooterBanner'
  import UnitVideo from '@/public/UnitVideo'
  import LeaveMessage from '@/public/LeaveMessage'
  import BaiduMap from '@/public/BaiduMap'
  import {Tab,TabItem,XDialog,Group, TransferDomDirective as TransferDom,Scroller,LoadMore,Qrcode,XTextarea,XInput,XButton,} from 'vux'
  export default {
    components: {
      HeaderBgImg,
      BgMusic,
      CardErcode,
      SwiperUploader,
      FooterBanner,
      LeaveMessage,
      BaiduMap,
      UnitVideo,
      Tab,
      TabItem,
      XDialog,
      Group,
      Scroller,
      LoadMore,
      Qrcode,
      XTextarea,
      XInput,
      XButton,
    },
    name: 'chooseModule',
    data () {
      return {
        show100:false,
        playstatus:false,
        cardercode:true,
        screenHeight: 160,//减去header的60px
        scale:375,
        verticalAlign:'5px',
        fontColor:"#ffffff",
        companyStatus:{contains:'',mark:'',index:0},
        showErcode:false,
      }
    },
    mounted(){
      this.$store.commit(types.ROUTESTATES, 'editModules');
      this.$store.commit(types.CHANGEMORE, false);
      this.$store.commit(types.ADDSTATUS, false);
      //this.$store.dispatch(types.GETQINIUTOKEN, false);
      let initHeight = document.body.clientHeight-46-54
      this.screenHeight = initHeight
      //比例系数
      this.scale = initHeight*initHeight/document.body.clientWidth
      let id = this.$route.params.id
      let username = this.$route.params.username 
      this.$store.dispatch(types.GETMODULEDATA,{id,username})
    },
    computed:{
      ...mapState({
        isEditing:state => state.moduleEdit.isEditing,
        data:state => state.moduleEdit.data,
      }), 
    },
    methods: {
      reduceContains(mark,index){
        const _this = this
        _this.$vux.confirm.show({
            title: '段落删除',
            content: '此段落未保存前可以刷新恢复！',
            onConfirm () {
              _this.$store.commit(types.REDUCECONTAINS,{mark,index})
            }
          })  
      },
      addContain(mark){
          this.companyStatus.contains = ''
          this.companyStatus.mark = mark
          this.companyStatus.index = -1
          this.show100 = true 
      },
      addwechatErcode(){
        this.showErcode = true
      },
      maketrue () {
        this.$store.commit(types.CHANGECONTAINS,this.companyStatus)
        this.show100 = false
      },
      changeIntration:_.debounce(function (mark,value,index) {
        if(this.isEditing==false){
          return
        }else{
          this.companyStatus.contains = value
          this.companyStatus.mark = mark
          this.companyStatus.index = index
          this.show100 = true
        }
      },1000),   
      reduceInfo(index){
        this.honorShow.fonts.splice(index,1)
      },
      addInfo(index){
        this.honorShow.fonts.splice(index+1,0,{contents:'新增数据'})
      },
      changeModuleFont:_.debounce(function (index,val) {
        if(this.isEditing==false){
          return
        }else{
          const _this = this
          this.$vux.confirm.prompt('在这里更改旧值', {
          title: '旧值：'+val,
          inputAttrs:'areatext',
          showInput:true,
            onConfirm (msg) {
              _.set(_this.honorShow, 'fonts['+index+'].contents', msg);
            }
          })
        }
      }, 500),
      getErcode:_.debounce(function (val) {
        this.show2 = true
      },300),
      getContent:_.debounce(function (val,mark) {
        if(this.isEditing==false){
          return 
        }else{
          const _this = this
           this.$vux.confirm.prompt('在这里更改旧值', {
             title: '旧值：'+val,
             onConfirm (msg) {
              _this.$store.commit(types.BASELISTS,{val,msg})
             }
           })
        }

      }, 500),
    },
  }
</script>

<style lang="less" scoped>
@import '~vux/src/styles/close';
.scrollFloat{
  img { 
    border: 0;
    max-width: 100%;
  }
  color:#ffffff;
  width:100%;
  z-index:2;
  .box2{
    position:relative;
    margin-top:80%;
    padding-bottom:220%;
    background:rgba(14,1,26,0.74);
    .popu{
      width:100%;
      position:absolute;
      top:-50px;
      text-align:center;
      @keyframes fadeOutUp {
        from {
          opacity: 1;
        }
        to {
          opacity: 0;
          transform: translate3d(0, -100%, 0);
        }
      }  
      .fadeOutUp {
        animation-name: fadeOutUp;
        animation-duration: 1.5s;
        animation-timing-function: ease;
        animation-iteration-count: infinite;
        animation-fill-mode: infinite;
      }
    }
    .aboutme{
        position: absolute;
        font-size: 16px;
        right: 10px;
        top: -5px;
        width: 110px;
        height: 35px;
        background: #5D2A6D;
        line-height: 35px;
        text-align: center;
        box-shadow: 0 -1px 15px rgba(0,0,0,.8);
    }
    .module1{ 
      max-width:620px; 
      padding:0 0px 10px; 
      margin:0 auto; 
      color:#fff; 
      position:relative; 
      overflow:hidden;
      .morebg{ 
        width:100%; 
        margin-top:10px; 
        text-align:center; 
        overflow:hidden;
        .more1{
          vertical-align:7px;
          color:#df9090;
          float:none; 
          
          background-size:18px; 
          text-decoration:none;
        }
      }
      .myname{ 
        font-size:30px; 
        text-align:center; 
        padding-top:10px; 
        color:#fff; 
        overflow:hidden;
        span{ 
          font-size:16px; 
          padding-left:3px;
        }
      }
      .callme{ 
        padding:10px 0 0; 
        text-align:center; 
        overflow:hidden;
        a{  
          color:#fff; 
          font-size:18px; 
           background-size:20px;
         }
      }
      .allnum{ 
        padding-top:20px; 
        margin:0 4%; 
        overflow:hidden;
        li{ 
          width:50%; 
          float:left; 
          text-align:center; 
          font-size:16px; 
          border-left:2px solid #fff; 
          box-sizing:border-box; 
          overflow:hidden;
          p{ 
            padding-bottom:5px; 
            font-size:18px;
          }
          em{ 
            font-style:normal; 
            font-size:18px;
          }
          a{ 
            color:#fff
          }
        }
        li:first-child{ 
          border-left:0
        }
      }
      .shouyi{ 
        font-size:18px; 
        color:#fff; 
        text-align:center; 
        padding:20px 0 0; 
        overflow:hidden;
        strong{ 
          font-size:20px; 
          color:#ffbd56
        }
        a{ 
          color:#ffbd56
        }
      }
      .iTitle{ 
        width:100%;; 
        position:relative; 
        overflow:hidden;
        margin: 10px 0px;
        img{ 
          width:100%; 
          vertical-align:bottom;
        }
        span{ 
          width:100%; 
          height:30px; 
          line-height:30px; 
          font-weight:bold; 
          color:#fff; 
          position:absolute; 
          left:0; top:50%; 
          margin-top:-15px; 
          font-size:18px; 
          text-align:center; display:block}
      }
    }
  }
}
.dialog-demo {
  .weui-dialog{
    border-radius: 8px;
    padding-bottom: 8px;
  }
  .dialog-title {
    line-height: 30px;
    color: #666;
  }
  .img-box {
    padding-top:30px;
    height: 350px;
    overflow: hidden;
  }
  .vux-close {
    margin-top: 8px;
    margin-bottom: 8px;
  }
}
</style>